<!--
 描述: 动态轮播折线图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">网格领域分布</div>
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_dt"></div> 
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
export default {
  name: "dynamicLine",
  data() {
    return {
      option: null,

    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_dt'));

        this.option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 233,0)'
                            }, {
                                offset: 0.5,
                                color: 'rgba(255, 255, 255,1)',
                            }, {
                                offset: 1,
                                color: 'rgba(0, 255, 233,0)'
                            }],
                            global: false
                        }
                    },
                },
            },
            grid: {
                top: '15%',
                left: '10%',
                right: '5%',
                bottom: '15%',
                // containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false,
                    color:'#A582EA'
                },

                axisLabel: {
                    color: '#A582EA',
                    width:100
                },
                splitLine: {
                    show: false
                },
                boundaryGap: false,
                data: ['农村','社区','机关','国企','社会企业','非公']

            }],

            yAxis: [{
                type: 'value',
                min: 0,
                // max: 140,
                splitNumber: 4,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#00BFF3',
                        opacity:0.23
                    }
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    margin: 20,
                    textStyle: {
                        color: '#fff',

                    },
                },
                axisTick: {
                    show: false,
                },
            }],
            series: [
                {
                    name:'网格数量',
                    type: 'line',
                    showAllSymbol: true,
                    symbol: 'circle',
                    symbolSize: 10,
                    lineStyle: {
                        normal: {
                            color: "#2CABE3",
                        },
                    },
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#2CABE3',
                        }
                    },
                    itemStyle: {
                        color: "#fff",
                        borderColor: "#2CABE3",
                        borderWidth: 2,
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgba(81,150,164,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(81,150,164,0)'
                                }
                            ], false),
                        }
                    },
                    data: [3,5,4,2,1,7,6]
                },
            ]
        };

      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });


        myChart.setOption(this.option, true);
    }
  },
  beforeDestroy() {
  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  left: 10px;
  top: 728px;
  width: 435px;
  height: 30%;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>
